<template>
    <div class="media-attr">
        <!-- <div class="thumb-list">
            <div v-for="(item, index) in currentElementPicList" :key="index" class="single-thumb">
                <div class="handle-wrap">
                    <i class="el-icon-edit" v-show="!item.id" @click="editCustom(item, index)"></i>
                </div>
                <img :src="item.id ? getPreview(item.preview) : defaultThumb" alt="" />
            </div>
        </div> -->
        <div class="base-row-item base-row-2 mb-10">
            <div class="main-text-tran-50">监控类型</div>
            <div class="main-mas-input-simple main-mas-input-simple-input">
                <select :id="trspVideo.getRtspTypeName()" class="main-mas-basis-select" @change="trspVideo.setRtspType(currentElementList[0], JQuery('#' + trspVideo.getRtspTypeName()).val(), false);register.getComponentById(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`).creatPlayer(currentElementList[0]);">
                    <option :value="item.value" v-for="(item, index) in rtspTypeList" :key="index">{{ item.label }}</option>
                </select>
            </div>
        </div>
        <div class="custom-resource">
            <textarea :rows="5" placeholder="请输入流媒体地址" :id="trspVideo.getRtspUrlName()"></textarea>
            <div class="iframe-botton">
                <div class="botton" @click="trspVideo.setRtspUrl(currentElementList[0], '', true); history.addHistory(store.clone(), 179); register.getComponentById(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`).creatPlayer(currentElementList[0]);">清 除</div>
                <div class="botton" @click="trspVideo.setRtspUrl(currentElementList[0], JQuery('#' + trspVideo.getRtspUrlName()).val(), false); history.addHistory(store.clone(), 180); register.getComponentById(`${system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id}`).creatPlayer(currentElementList[0]);">确 定</div>
            </div>
        </div>
        <!-- <div class="custom-resource" v-show="customVisible" :style="{position: customType === 'new' ? '' : 'absolute', top: editCustomIndex * 110 + 'px', left: '0', zIndex: 10}">
            <img :src="customUrl" class="custom-img" id="customPic" />
            <textarea :rows="5" placeholder="请输入自定义资源地址" :id="trspVideo.getCustomPicName()"></textarea>
            <div class="button-wrap custom-button-wrap">
                <el-button type="primary" @click="cancelCustomPic">取 消</el-button>
                <el-button type="primary" @click="addCustomPic(customType)">添 加</el-button>
            </div>
        </div>
        <div class="button-wrap">
            <el-button type="primary" @click="getPicList()">资源库</el-button>
            <FileUpload fileType="01" componentType="upload" buttonStyle="button" />
            <el-button type="primary" @click="customUrlEvent(customType)">自定义</el-button>
        </div>
        <el-drawer v-if="repository" :visible.sync="repository" title="资源库" size="350px" @close="dialogClose">
            <div class="resource-wrap" :id="window.getRootName() + 'RESOURCE_RTSPVIDEO_WRAP'">
                <ul v-show="currentElementList[0].component === 'Picture'">
                    <li v-for="(item, index) in picList" :class="{ 'select-resource' : selectPicIndex.indexOf(item.id) > -1 }" :key="'video_' + index" @click="selectPicture(item, index)">
                        <img class="video-resource" :src="getImgUrl(item, index)" alt="" />
                    </li>
                </ul>
            </div>
        </el-drawer> -->
    </div>
</template>

<script>
import FileUpload from '@/view/component/FileUpload.vue';
import store from '@/js/store/state.js';
import config from '@/js/util/config.js';
import template from '@/js/element/template.js';
import tree from '@/js/main/tree.js';
import trspVideo from '@/js/main/attribute/trspVideo.js';
import util from '@/js/util/util.js';
import system from '@/js/main/system.js';
import JQuery from 'jquery';
import register from '@/js/main/register.js';
import loadingImg from '@/image/main/toolbar/toolbar_loading.svg';
import history from '@/js/main/history.js';

export default {
    data() {
        return {
            currentElementPicList: [],
            currentElementList: store.getCurrentElementList(),
            menuData: tree,
            trspVideo: trspVideo,
            repository: false,
            picList: [],
            selectPicIndex: [],
            editCustomIndex: -1,
            customVisible: false,
            customType: 'new',
            defaultThumb: 'src/image/main/video.svg',
            showImgLineNum: 0,
            recorScrolldNum: 24,
            window: window,
            history: history,
            register: register,
            store: store,
            system: system,
            JQuery: JQuery,
            defaultImg: 'src/image/main/toolbar/toolbar_loading.svg',
            rtspTypeList: [
                {
                    label: 'hls',
                    value: 'hls'
                },
                {
                    label: 'flv',
                    value: 'flv'
                },
                {
                    label: 'webrtc',
                    value: 'webrtc'
                }
            ]
        };
    },
    components: {
        FileUpload
    },
    mounted() {
        trspVideo.setAttribute(this.currentElementList[0]);
        // let data = util.clone(this.currentElementList[0].data);
        // for (let i = 0; i < data.length; i++) {
        //     this.currentElementPicList.splice(i, 0, data[i]);
        // }
        // this.setSelectIndex(this.currentElementList);
    },
    // watch: {
    //     currentElementList: {
    //         handler() {
    //             let data = util.clone(this.currentElementList[0].data);
    //             this.currentElementPicList = data;
    //             this.setSelectIndex(this.currentElementList);
    //         },
    //         deep: true
    //     }
    // },
    methods: {
        dialogClose() {
            this.scrollListener(false);
        },
        getImgUrl(row, index) {
            if (index <= this.recorScrolldNum) {
                return row.icon;
            } else {
                return loadingImg;
            }
        },
        customUrlEvent() {
            this.customVisible = true;
            this.customType = 'new';
            this.clearCustomUrl();
        },
        clearCustomUrl() {
            JQuery('#' + trspVideo.getPicName()).val('');
        },
        editCustom(item, index) {
            this.customVisible = true;
            this.customType = 'edit';
            this.editCustomIndex = index;
            JQuery('#' + trspVideo.getPicName()).val(item.url);
        },
        cancelCustomPic() {
            this.clearCustomUrl();
            this.customVisible = false;
        },
        imgLoad(url, callback) {
            let img = new Image();
            img.src = url;
            if (img.complete) {
                callback(img.width, img.height);
            } else {
                img.onload = function() {
                    callback(img.width, img.height);
                    img.onload = null;
                };
            }
        },
        addCustomPic(type) {
            let _this = this;
            let url = JQuery('#' + trspVideo.getCustomPicName())
                .val()
                .replace(/\s*/g, '');
            if (url.length > 0) {
                this.customVisible = false;
                this.imgLoad(url, function(width, height) {
                    let customPic = {
                        height: height,
                        width: width,
                        preview: url,
                        url: url
                    };
                    if (type === 'new') {
                        _this.currentElementList[0].data.picList.splice(_this.currentElementList[0].data.picList.length, 0, customPic);
                        history.addHistory(store.clone(), 42);
                    } else {
                        _this.currentElementList[0].data.picList.splice(_this.editCustomIndex, 1);
                        _this.currentElementList[0].data.picList.splice(_this.editCustomIndex, 0, customPic);
                        history.addHistory(store.clone(), 44);
                    }
                    _this.clearCustomUrl();
                });
            } else {
                message.message('请输入正确的资源地址！', 'warning');
            }
        },
        setSelectIndex(elementList) {
            this.selectPicIndex = [];
            for (let i = 0; i < elementList[0].data.length; i++) {
                if (elementList[0].component === 'Picture') {
                    this.selectPicIndex.splice(this.selectPicIndex.length, 0, elementList[0].data[i].id);
                }
            }
        },
        selectPicture(item) {
            let selectPicElement = template.baseElementMap[item.id];
            this.currentElementList[0].data.picList.splice(0, 1);
            this.selectPicIndex.splice(0, 1);
            this.currentElementList[0].data.picList.splice(this.currentElementList[0].data.picList.length, 0, util.clone(selectPicElement.data[0]));
            this.selectPicIndex.splice(this.selectPicIndex.length, 0, item.id);
            history.addHistory(store.clone(), 45);
        },
        getPreview(url) {
            return url ? `${config.getServiceURL('scene')}service/scene/file/download?file=${url}` : `src/image/main/toolbar/logo.svg`;
        },
        getPicList() {
            this.repository = true;
            this.$nextTick(() => {
                let dom = document.getElementById(`${window.getRootName()}RESOURCE_RTSPVIDEO_WRAP`);
                this.picList = this.menuData[3].children[0].children;
                this.recorScrolldNum = Math.ceil(dom.clientHeight / 90) * 2 + 6;
                this.scrollListener();
            });
        },
        scrollListener(type = true) {
            let _this = this;
            let dom = document.getElementById(`${window.getRootName()}RESOURCE_RTSPVIDEO_WRAP`);
            if (type) {
                dom.addEventListener('scroll', _this.elementScroll);
            } else {
                dom.removeEventListener('scroll', _this.elementScroll);
            }
        },
        elementScroll: util.debounce(function($event) {
            let height = Math.ceil(($event.target.scrollTop + $event.target.clientHeight) / 90);
            if (this.recorScrolldNum > height * 2) return;
            this.recorScrolldNum = height * 2;
        })
    }
};
</script>

<style scoped lang="scss">
$BtnBackCol: #c06a6a0f;
$BtnHoverBackCol: #ffffff33;
$background: #ffffff0f;
.thumb-list {
    margin-top: 20px;
    width: 100%;
    .single-thumb {
        width: 100%;
        height: 100px;
        border: 1px solid $BtnHoverBackCol;
        border-radius: 3px;
        margin: 10px 0;
        position: relative;
        img {
            width: 100%;
            height: 100%;
            object-position: 50%;
            object-fit: contain;
        }
        .handle-wrap {
            position: absolute;
            top: 5px;
            right: 5px;
            z-index: 10;
            font-size: 18px;
            color: $FontWhite;
            cursor: pointer;
            i {
                margin: 0 5px;
            }
        }
    }
}
.button-wrap {
    margin-top: 10px;
    display: flex;
    align-items: center;
    text-align: center;
}
.button-wrap ::v-deep.el-button--primary {
    width: 75px;
    background: $BtnBackCol !important;
    height: 30px;
    border: none;
    line-height: 8px !important;
    margin: 0 0.1rem;
    &:hover {
        background: $BtnHoverBackCol !important;
    }
}
.media-attr ::v-deep.el-drawer {
    background: #212121ff;
}
.media-attr ::v-deep.el-drawer__header {
    margin-bottom: 0;
    color: $FontWhite;
}
.resource-wrap {
    padding: 5px 15px;
    overflow-y: auto;
    width: 100%;
    height: calc(100vh - 70px);
    li {
        width: 45%;
        height: 80px;
        margin: 5px;
        float: left;
        text-align: center;
        vertical-align: middle;
        overflow: hidden;
        border: 1px solid #39435d;
        cursor: pointer;
        border-radius: 2px;
        position: relative;
        img {
            width: 100%;
            height: 100%;
            object-position: 50% 50%;
            object-fit: contain;
        }
    }
    .select-resource {
        border: 1px solid #f50;
    }
}
.custom-resource {
    .custom-img {
        height: 100px;
        background: #f50;
    }
    textarea {
        border: 1px solid $BorderColor;
        background: $background;
        padding: 5px;
        color: $FontWhite;
        width: 100%;
        border-radius: 3px;
    }
    .custom-button-wrap {
        display: flex;
        justify-content: space-between;
    }
}
.iframe-botton {
    display: flex;
    line-height: 60px;
    flex-direction: row;
    justify-content: flex-end;
    .botton {
        cursor: pointer;
        width: 50%;
        height: 25px;
        line-height: 25px;
        background: $background;
        margin: 10px 20px;
        color: $FontWhite;
        text-align: center;
    }
}
.base-row-item {
    height: 30px;
    width: 100%;
    display: grid;
    grid-gap: 6px;
    align-items: center;
    font-weight: 600;
    cursor: auto;
}
.mb-10 {
    margin-bottom: 10px;
}
.base-row-2 {
    grid-template-columns: 60px 1fr 0;
}
</style>